<template>
  <div class="wrapped nav_products">
    <div class="content">
      <div class="nav_container">
        <div class="nav_logo"><img :src="img" /></div>
        <div class="nav_header">
          <!-- v-model="activeName" @tab-click="handleClick" -->
          <!-- tab 核心 -->
          <el-tabs>
            <el-tab-pane label="小米手机" name="first"> 小米手机 </el-tab-pane>
            <el-tab-pane label="红米" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="电视" name="fourth">电视</el-tab-pane>
          </el-tabs>
        </div>
        <div class="search">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
          </el-input>
        </div>
      </div>
      <div class="banner_container">
        <div class="nav_aside">
          <el-tabs class="tab_container" tab-position="left">
            <el-tab-pane class="tab" label="电话 电话卡">
              <div class="tab_content">
                <ul>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米CC9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-2.png" alt="">小米8 青春版</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-3.jpg" alt="">Redmi K20 Pro</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-4.jpg" alt="">移动4G+专区</a></li>
                  </ul>
                  <ul>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米CC美图定制版</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米8 屏幕指纹版</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">Redmi K20</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米移动 电话卡</a></li>
                  </ul>
                  <ul>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.jpg" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                  </ul>
                  <ul>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                  </ul>
                  <ul>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                  </ul>
                  <ul>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                    <li><a href="" id=""><img src="/imgs/item-box-1.png" alt="">小米9</a></li>
                  </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane class="tab" label="电视 盒子">
              <div class="tab_content">内容2</div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="banner">
          <el-carousel height="460px" indicator-position="outside">
            <el-carousel-item v-for="item in productList" :key="item.id">
              <div>
                <img :src="item.mainImage" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="seckill_container">
        <div class="seckill_title">
          <div class="title">小米秒杀</div>
          <div class="btns">
            <span @click="seckillChangeNext">&lt;</span>
            <span @click="seckillChangePrev">&gt;</span>
          </div>
        </div>
        <div>
          <div class="seckill_left">
            <div class="time">22:00 场</div>
            <SeckillIcon />
            <div class="desc">距离结束还有</div>
            <div class="count_down">
              <span>00</span> ： <span>00</span> ：
              <span>00</span>
            </div>
          </div>
          <div class="seckill_right">
            <swiper
              ref="mySwiper"
              :options="swiperOptions"
            >
              <swiper-slide v-for="item in seckillList" :key="item.goods_name">
                <div
                  class="item"
                  @click="goProduct(item.product_id)"
                  :style="{
                    'border-top-color':
                      'rgb(' + item.border_color.join(',') + ')',
                  }"
                >
                  <el-image :src="item.discount_img"></el-image>
                  <div class="desc">
                    <div class="goods_name">{{ item.goods_name }}</div>
                    <div class="goods_desc">{{ item.desc }}</div>
                    <div class="price">
                      {{ item.seckill_Price }}元<span class="old_price"
                        >{{ item.goods_price }}元</span
                      >
                    </div>
                  </div>
                </div>
              </swiper-slide>
              <div class="swiper_buttons">
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
            </swiper>
          </div>
        </div>
      </div>
      <ServiceBar />
    </div>
  </div>
</template>

<script>
import img from "../../assets/mi_logo.png";
import request from "../../request";

// Import Swiper
import "swiper/swiper-bundle.min.css"; //导入样式
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import SwiperCore, { Autoplay, Navigation } from "swiper";

SwiperCore.use([Navigation, Autoplay]); //注册模块

import SeckillIcon from "./seckill_icon"
import ServiceBar from '../../components/ServiceBar'

export default {
  name: "index",
  components: {
    Swiper,
    SwiperSlide,
    SeckillIcon,
    ServiceBar,
  },
  data() {
    return {
      img,
      productList: [],
      seckillList: [],
      swiperOptions: {
        slidesPerView: 4,
        spaceBetween: 15,
        slidesPerGroup: 4,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  mounted() {
    // banner
    request.get("/products").then((data) => {
      this.productList = data.data.list;
    });
    // 秒杀
    request.get("/products/seckill").then((data) => {
      const { list = [] } = data.data;
      this.seckillList = list.map((c) => {
        c.border_color = this.getRandomColor();
        return c;
      });
    });
  },
  methods: {
    seckillChangeNext() {
      document.getElementsByClassName("swiper-button-next")[0].click();
    },
    seckillChangePrev() {
      document.getElementsByClassName("swiper-button-prev")[0].click();
    },
    goProduct(id) {
      this.$router.push(`/product/${id}`)
    },
    // 随机色
    getRandomColor() {
      return [
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255),
        Math.round(Math.random() * 255),
      ];
    },
  },
};
</script>
<style lang="scss" scoped>
@import './../../assets/scss/config.scss';
.nav_products {
}
.nav_container {
  overflow: hidden;
  padding: 30px 0;
  > div {
    float: left;
  }
  .nav_logo {
  }
  .nav_header {
    padding-left: 120px;
    width: 850px;
    box-sizing: border-box;
    .item_list {
    }
  }
  .search {
    width: 180px;
    float: right;
  }
}

.banner_container {
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  .nav_aside {
    position: absolute;
    width: 240px;
    height: calc(100% - 26px);
    // background: red;
    z-index: 9;
    // opacity: 0.3;
    background-color: rgba(0, 0, 0, 0.4);
    .tab_container {
      height: 100%;
      width: 850px;
      ::v-deep.el-tabs__header {
        width: 240px;
        margin-right: 0;
      }
      ::v-deep.el-tabs__content {
        height: 100%;
      }
      .tab {
        height: 100%;
        .tab_content {
          height: 100%;
          background-color:$colorG;
          display: none;
          ul{
            display:flex;
            justify-content:space-between;
            height:75px;
            li{
              height:75px;
              line-height:75px;
              flex:1;
              padding-left:23px;
            }
            a{
              color:$colorB;
              font-size:14px;
            }
            img{
              width:42px;
              height:35px;
              vertical-align:middle;
              margin-right:15px;
            }
          }
        }
      }
    }
  }
}

.seckill_container {
  margin: 30px 0;
  background-color: #f5f5f5;
  overflow: hidden;
  .seckill_title {
    background: #f7f7f7;
    overflow: hidden;
    .title {
      float: left;
      font-size: 20px;
      font-weight: bold;
      margin: 10px 0;
    }
    .btns {
      float: right;
      position: relative;
      top: 10px;
      > span {
        display: inline-block;
        width: 34px;
        height: 20px;
        border: 1px solid #e0e0e0;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        color: #b0b0b0;
        font-weight: bold;
      }
    }
  }
  .seckill_left {
    float: left;
    width: 240px;
    height: 360px;
    background-color: #f1eded;
    text-align: center;
    border-top-color: #e53935;
    margin-right: 10px;
    border-top-width: 1px;
    border-top-style: double;
    .time {
      margin-top: 60px;
      margin-bottom: 30px;
      color: #e53935;
      font-size: 20px;
      font-weight: 600;
    }
    .desc {
      margin-top: 20px;
      color: rgba(0, 0, 0, 0.54);
    }
    .count_down {
      margin-top: 40px;
      color: #605751;
      font-weight: bold;
      > span {
        display: inline-block;
        width: 46px;
        height: 46px;
        background-color: #605751;
        color: #fff;
        text-align: center;
        line-height: 46px;
        font-size: 24px;
      }
    }
  }
  .seckill_right {
    position: relative;
    .item {
      position: relative;
      height: 360px;
      box-sizing: border-box;
      border-top-width: 1px;
      border-top-style: double;
      background: white;
      cursor: pointer;
      > img {
      }
      .desc {
        text-align: center;
        .goods_name {
          margin-top: 20px;
        }
        .goods_desc {
          margin-top: 10px;
          color: #b0b0b0;
        }
        .price {
          margin-top: 20px;
          color: #ff6709;
          .old_price {
            padding-left: 10px;
            color: #b0b0b0;
            text-decoration: line-through;
          }
        }
      }
    }
    .swiper_buttons {
      display: none;
    }
  }
}
</style>